<template lang="pug">
.page
  .ApplyInvoice
    Modal(
      v-model="isShowApplyInvoiceModal"
      title="申请开票"
      class-name="vertical-center-modal"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="120")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'text'")
            .line-h-30 {{formData[item.model]}}
          template(v-if="item.type === 'select'")
            Select(v-if="item.prop === 'billingMethod'" v-model="formData[item.model]" :placeholder="item.placeholder" @on-change="getMoneyByInvoiceType")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="+c_item.value") {{c_item.label}}
            Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="+c_item.value") {{c_item.label}}
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import { InvoiceApi } from '@/api/Invoice.api.js'
import { Common } from '@/utils/common.js'
export default {
  name: 'ApplyInvoice',

  data () {
    return {
      isShowApplyInvoiceModal: false,
      formData: {
        billingMethod: '',
        invoiceDetail: '',
        remark: '',
        toSocialInsurance: '',
        serverFee: '',
        toProvidentFund: '',
        toTax: '',
        toCommercial: '',
        toFee: '',
        toSalary: '',
        total: ''
      },
      formItem: [
        { type: 'select', label: '开票方式', placeholder: '请选择开票方式', prop: 'billingMethod', model: 'billingMethod', style: 'ivu-col-span-24', options: 'billingmethod' },
        { type: 'select', label: '开票明细', placeholder: '请选择开票明细', prop: 'invoiceDetail', model: 'invoiceDetail', style: 'ivu-col-span-24', options: 'invoicedetail' },
        { type: 'input', label: '特殊要求', placeholder: '请输入特殊要求', prop: 'remark', model: 'remark', style: 'ivu-col-span-24' },
        { type: 'input', label: '代缴社保费', placeholder: '请输入代缴社保费', prop: 'toSocialInsurance', model: 'toSocialInsurance', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '服务费', placeholder: '请输入服务费', prop: 'serverFee', model: 'serverFee', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '代缴公积金', placeholder: '请输入代缴公积金', prop: 'toProvidentFund', model: 'toProvidentFund', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '个税', placeholder: '请输入个税', prop: 'toTax', model: 'toTax', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '代缴商业险', placeholder: '请输入代缴商业险', prop: 'toCommercial', model: 'toCommercial', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '代发手续费', placeholder: '请输入代发手续费', prop: 'toFee', model: 'toFee', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '代发工资', placeholder: '请输入代发工资', prop: 'toSalary', model: 'toSalary', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '合计', placeholder: '合计', prop: 'total', model: 'total', style: 'ivu-col-span-12', isDisabled: true }
      ],
      rules: {
        billingMethod: [
          { required: true, message: '请选择开票方式' }
        ],
        invoiceDetail: [
          { required: true, message: '请选择开票明细' }
        ]
      },
      arrListDown: {
        tempOps: [],
        billingmethod: [],
        invoicedetail: []
      },
      rowYear: '',
      rowMonth: ''
    }
  },

  watch: {
  },

  mounted () {
    this.getEnum()
  },

  methods: {
    // 数据字典
    getEnum () {
      let groupName = 'invoice.billingmethod,invoice.invoicedetail'
      Common.getEnum(groupName, this.arrListDown)
      // console.log('数据字典：', this.arrListDown)
    },

    // 根据开票方式获取金额
    async getMoneyByInvoiceType () {
      var params = {
        CompanyID: this.$route.query.companyId,
        Year: this.rowYear,
        Month: this.rowMonth,
        InvoiceType: this.formData.billingMethod
      }
      let res = await InvoiceApi.getMoneyByInvoiceType(params)
      console.log('根据开票方式获取金额res: ', res)

      if (res.data.data) {
        Object.keys(res.data.data).forEach(key => {
          this.formData[key] = res.data.data[key]
        })
      }
    },

    cancel () {
    },

    // 新增开票申请
    async handleSubmit () {
      console.log('this.formData: ', this.formData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          var params = {
            CompanyID: this.$route.query.companyId,
            CompanyName: this.$route.query.companyName,
            Year: this.rowYear,
            Month: this.rowMonth
          }
          InvoiceApi.postInvoice({ ...params, ...this.formData }).then(res => {
            console.log('新增开票申请res: ', res)
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.isShowApplyInvoiceModal = false
              this.$emit('query')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
